import {designPage, reactive, useRefs} from "plain-design-composition";
import {$message, Button, Checkbox, CheckboxGroup, ColorPicker, DatePicker, Form, FormItem, Input, InputNumber, Radio, RadioGroup, Rate, Segmented, Select, SelectOption, Slider, Switch, TimePicker, Tooltip} from "../../../../packages";
import {DemoRow} from "../../Demo/DemoRow";
import QuestionCircleOutlined from "@ant-design/icons/QuestionCircleOutlined";

export default designPage(() => {

  const { refs, onRef } = useRefs({
    form: Form
  });

  const state = reactive({
    formData: {
      field1: '111',
      field2: '222',
      field11: 25,
    } as any,
    disabled: undefined as undefined | boolean,
    showFlag: true,
    size: 'middle' as any,
  });

  const { formData } = state;

  const levelData = [
    { levelName: '一级', code: '1' },
    { levelName: '二级', code: '2' },
    { levelName: '三级', code: '3' },
  ];

  const treeData = [
    {
      id: '1',
      name: '一级 1',
      subs: [
        ...([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(index => ({
          id: '1-' + index,
          name: '二级 1-' + index,
          subs: [{
            id: `1-${index}-1`,
            name: `三级 1-${index}-1`
          }]
        })))
      ]
    }, {
      id: '2',
      name: '一级 2',
      subs: [
        ...([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(index => ({
          id: '2-' + index,
          name: '二级 2-' + index,
          subs: [{
            id: `2-${index}-1`,
            name: `三级 2-${index}-1`
          }]
        })))
      ]
    }, {
      id: '3',
      name: '一级 3',
      subs: [{
        id: '3-1',
        name: '二级 3-1',
        subs: [{
          id: '3-1-1',
          name: '三级 3-1-1'
        }, {
          id: '3-1-2',
          name: '三级 3-1-2'
        }]
      }, {
        id: '3-2',
        name: '二级 3-2',
        subs: [{
          id: '3-2-1',
          name: '三级 3-2-1'
        }]
      }]
    }];

  async function saveValidate() {
    await refs.form!.validate();
    $message.success('校验通过');
  }

  const options: any[] = [
    { label: 'Small', value: 'small' },
    { label: 'Middle', value: 'middle' },
    { label: 'Large', value: 'large' },
  ];

  return () => (
    <div>
      <DemoRow title={'表单组件'}>
        <div>
          <Form ref={onRef.form} modelValue={formData} disabled={state.disabled} singleColumnCenter size={state.size}>
            <FormItem label="大小尺寸">
              <Segmented options={options} v-model={state.size}/>
            </FormItem>
            <FormItem label={'普通文本框'} field={'field1'} required>
              <Input v-model={formData.field1} placeholder={'请输入文本'}/>
            </FormItem>
            <FormItem label={'普通文本框'} field={'field2'} required>
              <Input v-model={formData.field2} placeholder={'请输入文本'}/>
            </FormItem>
            <FormItem label={'普通文本域'} field={'field2'} required>
              <Input v-model={formData.field2} textarea placeholder={'请输入文本域'}/>
            </FormItem>
            <FormItem label={'数字框'} field={'field3'} rules={{ type: 'number', max: 100, message: '最大值100' }} required>
              {{
                default: () => <InputNumber v-model={formData.field3} placeholder={'请输入数字'}/>,
                append: () => <Tooltip message={'提示'}><QuestionCircleOutlined/></Tooltip>,
              }}
            </FormItem>
            <FormItem label={'复选框'} field={'field5'} rules={{ min: 1, max: 3, type: 'array', message: '1-3个元素' }} required>
              <CheckboxGroup itemWidth="50%" v-model={formData.field5}>
                <Checkbox checkboxForAll label="全部"/>
                <Checkbox label="大客户" value="large"/>
                <Checkbox label="潜在客户" value="potential"/>
                <Checkbox label="长久客户" value="long"/>
                <Checkbox label="赢单客户" value="order"/>
              </CheckboxGroup>
            </FormItem>
            <FormItem label={'下拉选项'} field={'field6'} required rules={{ message: '只能选择二级', enum: ['2'] }}>
              <Select v-model={formData.field6} placeholder={'请选择'}>
                {levelData.map(item => <SelectOption children={item.levelName} value={item.code} key={item.code}/>)}
              </Select>
            </FormItem>
            <FormItem label={'下拉选项（多选）'} field={'field62'} required rules={{ required: true, type: 'array', min: 1, message: '最少选择一项' }}>
              <Select v-model={formData.field62} placeholder={'请选择'} multiple>
                {levelData.map(item => <SelectOption children={item.levelName} value={item.code} key={item.code}/>)}
              </Select>
            </FormItem>
            {/*<FormItem label={'级联选择'} field={'field61'} rules={{ required: true, message: '不能为空' }}>
            <Cascade
              placeholder={'请选择'}
              v-model={formData.field61}
              data={treeData}
              labelField={'name'}
              keyField={'id'}
              childrenField={'subs'}
            />
          </FormItem>*/}
            <FormItem label={'单选按钮'} field={'field9'} required>
              <RadioGroup itemWidth="50%" v-model={formData.field9}>
                <Radio label="是" value="Y"/>
                <Radio label="否" value="N"/>
                <Radio label="未知" value="NO"/>
              </RadioGroup>
            </FormItem>
            <FormItem label={'开关按钮'} field={'field10'} rules={{ message: '请阅读并同意使用协议', enum: [true] }}>
              <Switch v-model={formData.field10}/>
            </FormItem>
            <FormItem label={'滑块'} field={'field11'} required rules={{ min: 50, type: 'number', message: '最小值50' }}>
              <Slider v-model={formData.field11}/>
            </FormItem>
            <FormItem label={'标签输入框'} field={'field12'} required rules={[{ min: 3, type: 'array', message: '最少输入3个标签' }, { max: 5, type: 'array', message: '最多5个标签' }]}>
              <Input multiple v-model={formData.field12} placeholder={'请选择'}/>
            </FormItem>
            <FormItem label={'评分'} field={'field13'} required rules={{ min: 1, type: 'number', message: '最低1分' }}>
              <Rate v-model={formData.field13}/>
            </FormItem>
            <FormItem label={'颜色选择器'} field={'field14'} rules={{ required: true, message: '颜色不能为空' }}>
              <ColorPicker v-model={formData.field14} placeholder={'请选择'}/>
            </FormItem>
            <FormItem label={'时间选择'} field={'field15'} required>
              <TimePicker v-model={formData.field15} placeholder={'请选择'}/>
            </FormItem>
            <FormItem label={'时间范围选择'} rules={[
              { field: 'field17', required: true },
              { field: 'field18', required: true },
            ]}>
              <TimePicker v-model:start={formData.field17} v-model:end={formData.field18} range/>
            </FormItem>
            <FormItem label={'日期时间选择'} field={'field19'} required>
              <DatePicker v-model={formData.field19} datetime placeholder={'请选择'}/>
            </FormItem>

            <FormItem label="state.showFlag">
              <Switch v-model={state.showFlag}/>
            </FormItem>
            {!!state.showFlag && (
              <FormItem label={'日期时间范围选择_2'} rules={[
                { field: 'field20', required: true },
                { field: 'field21', required: true },
              ]}>
                <DatePicker v-model:start={formData.field20} v-model:end={formData.field21} range datetime/>
              </FormItem>
            )}
            <FormItem label={'日期时间范围选择_1'}>
              <DatePicker v-model:start={formData.field22} v-model:end={formData.field23} range datetime/>
            </FormItem>

            <FormItem label="文本域" field="field22" required>
              <Input textarea v-model={formData.field22}/>
            </FormItem>
            <FormItem colon={false}>
              <Button label={'校验'} onClick={saveValidate}/>
              <Button label={'取消校验'} onClick={() => refs.form!.clearValidate()}/>
            </FormItem>
            <FormItem colon={false}>
              <Button label={state.disabled ? '启用' : '禁用'} onClick={() => state.disabled = !state.disabled} disabled={false}/>
            </FormItem>
          </Form>
        </div>
      </DemoRow>
    </div>
  );
});
